<template>
  <div class="all">
    <div class="search flex-start">
      <div class="date">
        <label for="">会议号</label
        ><input class="searchInput" type="text" placeholder="请输入会议号" v-model="cfCode" />
      </div>
      <div class="type">
        <label for="">会议名称</label
        ><input class="searchInput" type="text" placeholder="请输入会议名称" v-model="cfName" />
      </div>
      <div class="email">
        <label for="">发起人</label
        ><input class="searchInput" type="text" placeholder="请输入发起人" v-model="sponsorName" />
      </div>
      <div class="btnbox flex-start">
        <div class="btn-white2 cp" @click="reset">重置</div>
        <div class="btn-blue2 cp" @click="search">查询</div>
        <div class="open flex-start">
          <span class="blue" @click="changeState" v-if="flag === true"
            >展开</span
          >
          <span class="blue" @click="changeState" v-else>收起</span>
          <span class="openImg"><img :src="imgurl" alt="" @click="changeState" /></span>
        </div>
      </div>
    </div>
    <div v-if="flag === false" class="line"></div>
    <div v-if="flag === false" class="search meetingTime flex-start">
      <!-- <div class="line"></div> -->
      <div class="time">
        <span>会议时间</span>
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="请选择日期"
          :format="'yyyy-MM-dd HH:mm'"
          :clearable="false"
        >
        </el-date-picker>
        <span class="now">至</span>
        <el-date-picker v-model="value2" type="date" :clearable="false" placeholder="请选择日期" :format="'yyyy-MM-dd HH:mm'"   :picker-options="pickerOptions1">
        </el-date-picker>
      </div>
    </div>
  </div>
</template>

<script>
// import imgSrc1 from '@/assets/components/open.png'
// import imgSrc2 from '@/assets/components/collect.png'
import Time from '@/utils/tools/getUTCTime'

export default {
  data () {
    return {
      flag: false,
      value1: Date.now(),
      // value1: this.$store.state.cfManage.params.startTime1,
      value2: this.$store.state.cfManage.params.startTime2,
      cfCode: this.$store.state.cfManage.params.cfCode,
      cfName: this.$store.state.cfManage.params.cfName,
      sponsorName: this.$store.state.cfManage.params.sponsorName,

      // pickerOptions0: {
      //   disabledDate: (time) => {
      //     if (this.value2 !== '') {
      //       return time.getTime() > this.value2
      //     }
      //   }
      // },
      pickerOptions1: {
        disabledDate: (time) => {
          return time.getTime() < this.value1
        }
      }

    }
  },
  computed: {
    imgurl () {
      if (this.flag === true) {
        return require('@/assets/components/open.png')
      } else {
        return require('@/assets/components/collect.png')
      }
    }
  },
  methods: {
    changeState () {
      this.flag = !this.flag
    },
    reset () {
      this.value1 = null
      this.value2 = null
      this.cfCode = null
      this.cfName = null
      this.sponsorName = null
    },
    search () {
      this.$store.commit('cfManage/set_page', 1)
      this.$store.commit('cfManage/set_size', 10)
      this.$store.commit('cfManage/set_cfCode', this.cfCode ? this.cfCode.trim() : null)
      this.$store.commit('cfManage/set_cfName', this.cfName ? this.cfName.trim() : null)
      this.$store.commit('cfManage/set_sponsorName', this.sponsorName ? this.sponsorName.trim() : null)
      this.$store.commit('cfManage/set_startTime1', this.value1 ? Time.getTime(this.value1) : null)
      this.$store.commit('cfManage/set_startTime2', this.value2 ? Time.getTime(this.value2) : null)
      this.$store.dispatch('cfManage/getTableData').then().catch(err => {
        this.$message({
          type: 'error',
          message: err,
          duration: 1000
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.meetingTime {
  flex-wrap: wrap;
  margin-top: 0px !important;

  .time {
    margin-left: 36px;
    .now {
      margin-left: 8px;
    }
    /deep/ .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 280px;
      height: 40px;
      opacity: 1;
      background: #ffffff;

      border-radius: 5px;
      margin-left: 12px;
      outline: none;

      .el-input__icon {
        //   margin-left: 240px;
        position: absolute;
        left: 240px;
      }
    }
    /deep/ .el-date-table td span {
      border-radius: 2px !important;
    }
    /deep/ .el-date-picker {
      width: 280px !important;
      .el-picker-panel__content {
        width: 280px !important;
      }
    }
  }
}
.all {
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 8px !important;
  margin-top: 20px;
}

.search {
  width: 100%;
  height: 80px;
  background-color: #fff;

  position: relative;
  font-size: 14px;
  color: #3d4966;

  div {
    label {
      margin-right: 12px;
    }
  }
  .date {
    margin-left: 36px;
  }
  .type {
    margin-left: 20px;
  }
  .email {
    margin-left: 20px;
  }
  .btnbox {
    // height: 100%;
    // width: 213px;
    position: absolute;
    right: 24px;
    .btn-white2 {
      margin-right: 20px;
    }
    .open {
      margin-left: 24px;

      .openImg {
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-left: 8px;
        img {
          width: 100%;
        }
      }
    }
  }
}
</style>
